<template>
  <a-card class="dash-card" :loading="loading" :body-style="{ padding: '0 20px 0 20px' }" :bordered="false" :head-style='hStyle'>
    <div slot="title" class="card-title">
      <img class='title-img' :src="computedImgSrc" alt="" />
      <span v-if="!$slots.title">{{ title }}</span>
      <slot name="title"></slot>
    </div>

    <div v-if="showMore" class="card-more" slot="extra" @click="actionView">
      <span class="card-more-title">更多</span>
      <img class='card-more-img' src="~@assets/card-more.png" alt="" />
    </div>
    <div v-else slot="extra">
      <slot name="extra"></slot>
    </div>

    <div :style="{height: showTab ?'calc(100% - 50px)': '100%'}">
      <slot></slot>
    </div>
  </a-card>
</template>

<script>
export default {
  name: 'DashCard',
  props: {
    title: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    imgSrc: {
      type: String,
      default: 'query1.png'
    },
    showMore: {
      type: Boolean,
      default: true
    },
    showTab: {
      type: Boolean,
      default: true
    },
    more: {
      default: '#'
    }
  },
  computed: {
    computedImgSrc() {
      return require(`@/assets/${this.imgSrc}`)
    }
  },
  data() {
    return {
      hStyle: { 'font-size': '14px', 'font-weight': 'bold', 'border-bottom': 'unset', 'min-height': 'unset' }
    }
  },
  methods: {
    actionView() {
      if (typeof this.more == 'string') {
        this.$router.push({ name: this.more })
      } else if (typeof this.more == 'function') {
        this.more()
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-head-title, /deep/ .ant-card-extra {
  padding: 16px 0 8px 0 !important;
}

.card-title {
  display: flex;
  align-items: center;
  height: 100%;

  .title-img {
    width: 23px;
    height: 23px;
    margin-right: 6px;
  }
}

.card-more {
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;

  .card-more-title {
    font-size: 12px;
    color: #338be1;
  }

  .card-more-img {
    height: 13px;
    margin-left: 3px;
  }
}

.dash-card.ant-card {
  height: 100%;
  border-radius: 5px;
  box-sizing: border-box;
  margin: unset;

  /deep/ .ant-card-body {
    height: calc(100% - 55px);
    font-weight: 600;
  }
}
</style>